<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
  <script src="./node_modules/lib-flexible/flexible.js"></script>
</head>
<body>

  <script>
    // rem： 以小屏幕为完美屏幕 678se
    // 在大屏幕上显示更大的内容；
    // 核心：获取屏幕设备的宽度，然后跟ui设计题做出一个比例，将这个比例赋值给html中的font-size
    // const docW = window.innerWidth;
    // console.log('docW:', docW)

    // const font = docW / 750 * 200;
    // console.log(document.querySelector('html'))
    // document.querySelector('html').style.fontSize = font + 'px';
    // // console.log('font:', font)

    // rem： 是一个相对单位；他是相对于根结点字体大小的变化而变化的；

  </script>

  <style>
    *{
      margin: 0;
      padding:0;
    }

    /* html {
      font-size: 100px;
    } */

    @media (device-width: 375px) and (-webkit-device-pixel-ratio: 2) {
      .box {
        background: url(../imgs/ajax.png);
      }
    }

    @media (-webkit-device-pixel-ratio: 3) {
      .box {
        background: url(../imgs/button组件分析.png);
      }
    }





    /* @mixin bg-image($url){
      background-image: url($url + "@2x.png");
      @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
        background-image: url($url + "@3x.png");
      }
    } */

    .box {
      width: 10rem;
      height: 10rem;
      /* background: lightcoral; */
      /* background: url(../imgs/ajax.png); */
    }


  </style>

  <div class="box"></div>

</body>
</html>
